<template>
    <div id="app">
        <PageNav
            :title="pageTitle"
            :sub-title="pageSubTitle"
        />
        <template name="pageGroup">
            <router-view/>
        </template>
        <PageBar>
            <Button
                theme="second"
                to="/index"
            >
                <div class="inner">
                    <i class="f-icon fs-more">&#xf006;</i>
                    <div class="sub-label">首页</div>
                </div>
            </Button>
            <Button
                theme="main"
                to="/component/index"
            >
                <div class="inner">
                    <i class="f-icon fs-more">&#xf01c;</i>
                    <div class="sub-label">组件</div>
                    <Badge
                        label="8"
                        theme="primary"
                        size="mini"
                    />
                </div>
            </Button>
        </PageBar>
    </div>
</template>

<script>
import AppMixin from '@/mixins/app';
export default {
    name: 'App',
    mixins: [AppMixin],
    watch: {
        '$route.meta': {
            handler(val, oldVal) {
                if (val === oldVal) return;
                this.updatePageData({ meta: val });
            },
            immediate: true,
        },
    },
};
</script>

<style lang="scss">
#app {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: 100%;
}
</style>
